.page-categories{
	.categories{
		float: left;
		width: 88px;
		.item-list{
			display: inline-block;
			padding: 2px;
			position: relative;
			width: 90px;
			height: 90px;
			margin-bottom: 1px;
			img{
				width: 88px;
				height: 88px;
			}
			.selected-wrap{
				position: absolute;
				width: 90px;
				height: 90px;
				top: 0;
				left: 0;
				.selected-line{
					display: block;
					width: 20px;
					height: 20px;
					position: absolute;
					&.left-top{
						border-top: 2px solid #A92123;
						border-left: 2px solid #A92123;
						top: 0;
						left: 0;
					}
					&.left-bottom{
						border-bottom: 2px solid #A92123;
						border-left: 2px solid #A92123;
						bottom: 0;
						left: 0;
					}
					&.right-top{
						border-top: 2px solid #A92123;
						border-right: 2px solid #A92123;
						top: 0;
						right: 0;
					}
					&.right-bottom{
						border-bottom: 2px solid #A92123;
						border-right: 2px solid #A92123;
						bottom: 0;
						right: 0;
					}
				}
			}
		}
	}
	.category-children{
		padding-left: 88px;
		.category-name{
			height: 45px;
			line-height: 45px;
			font-size: 14px;
			color: #000;
			.circle-fill{
				display: inline-block;
				border-radius: 50%;
				width: 9px;
				height: 9px;
				background-color: #A92123;
				margin: 0 6px 0 16px;
			}
		}
		.list-wrap{
			padding: 15px 20px;
			background-color: #fff;
			display: inline-block;
			width: 100%;
			.item-list{
				float: left;
				width: 82px;
				height: 82px;
				text-align: center;
				margin-bottom: 15px;
				display: block;
				.child-img{
					width: 60px;
					height: 60px;
				}
				.child-name{
					font-size: 13px;
					line-height: 13px;
					margin-top: 5px;
				}
			}
		}
	}
}

.page-products{
	height: 100%;
	.text-red{
		color: #A92123;
	}
	.sorts-wrap{
		border-bottom: 1px solid #C2C2C2;
		.sort{
			width: 25%;
			text-align: center;
			height: 42px;
			line-height: 42px;
			font-size: 16px;
			color: #828282;
			background-color: #fff;
			float: left;
			border-right: 1px solid #C2C2C2;
			&:last-child{
				border-right: none;
			}
			&.curr{
				color: #A92123;
			}
		}
		.icon{
			width: 6px;
			height: 9px;
			display: inline-block;
			vertical-align: middle;
			margin-left: 2px;
			background-size: cover;
			background-repeat: no-repeat;
		}
		.icon-arrow{
			background-image: url("../images/arrow.png");
			&.asc{
				background-image: url("../images/asc.png");
			}
			&.desc{
				background-image: url("../images/desc.png");
			}
		}
		.icon-filter{
			background-image: url("../images/filter.png");
			width: 12px;
			height: 13px;
		}
	}
	.products-list{
		.product-item{
			padding: 20px 0;
			margin: 10px 0;
			background-color: #fff;
			box-shadow: 0px 1px 1px rgba(0,0,0,0.3);
			.product-image-wrap{
				width: 30%;
				padding: 0 10px;
				img{
					width: 100%;
				}
			}
			.product-info-wrap{
				width: 70%;
				padding: 0 20px;
				.name{
					font-size: 14px;
				}
				.price-wrap{
					padding: 0 10px;
					margin-top: 15px;
				}
				.price{
					font-size: 16px;
					color: #A92123;
				}
				.price-old{
					font-size: 11px;
					color: #AAAAAA;
					text-decoration: line-through;
				}
			}
		}
		.loading{
			padding: 0 20px 20px;
			text-align: center;
		}
	}
	.filter-panel{
    position: absolute;
    top: 0px;
	  z-index: 1001;
	  right: -100%;
	  width: 80%;
	  height: 100%;
	  background: #fff;
	  -webkit-transition: .2s right ease-in-out .2s;
	  overflow:hidden;
	  &.show{
	  	right: 0;
	  }
	  .icon{
			width: 10px;
			height: 19px;
			display: inline-block;
			vertical-align: middle;
			margin-left: 2px;
			background-size: cover;
			background-repeat: no-repeat;
		}
    .top-bar{
	    position: relative;
	    top: 0;
	    width: 100%;
	    height: 44px;
	    line-height: 44px;
	    background: #fff;
	    border-bottom: 1px solid #dedede;
      .icon-back{
       	background-image: url("../images/icon-arrow-right.png");
		    transform: rotateY(180deg);
		    float: left;
		    margin-top: 12px;
		    margin-left: 10px;
      }
      .text{
        width: 100%;
	      text-align: center;
	      display: block;
      }
      .btn-filter{
        position: absolute;
        right: 10px;
        top: 0;
      }
    }
    .accordion{
	    width: 100%;
	    .filter-item{  
        .filter-item-link{
           width: 100%;
	         text-align: left;
	         display: block;
	         padding-left: 10px;
	         padding-right: 10px;
	         height: 44px;
	         line-height: 44px;
	         border-bottom: 1px solid #dedede;
	         .text{
	         	 display: block;
             float: right;
             padding-right: 10px;
	         }
	         .icon-arrow-right {
	         	  display: block;
					    float: right;
					    margin-top: 12px;
	         }
        }
        .options{
        	.option-item-link{
            height: 44px;
            display: block;
            width: 100%;
            line-height: 44px;
            padding-left: 10px;
            border-bottom: 1px solid #dedede;
            background-color: #F3F3F3;
        	}
        	.icon-tick{
        		float: right;
        		background-image: url("../images/tick.png");
        		width: 17px;
        		height: 15px;
        		margin: 9px 10px 0 0;
        	}
        } 
	    }
    }
	}
	.no-products{
		text-align: center;
		padding: 50px 0;
	}
}

.page-product{
	padding-bottom: 50px;
	padding-top: 47px;
	.product-header{
		height: 47px;
		line-height: 47px;
		background-color: #A92123;
		position: relative;
		text-align: center;
		color: #fff;
		font-size: 16px;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		.icon{
      width: 12px;
      height: 21px;
      display: inline-block;
      position: absolute;
      left: 16px;
      top: 13px;
    }
    .icon-back{
      background-image: url("../images/icon-arrow-left-white.png");
      background-size: cover;
      background-repeat: no-repeat;
    }
		.product-tab-title{
			width: 70px;
			text-align: center;
			border-bottom: 3px solid #A92123;
			display: inline-block;
    	color: #fff;
    	height: 46px;
			&.selected{
				font-size: 19px;
				border-color: #fff;
			}
		}
	}

	.product-tab-section{
		background-color: #F8F8F8;
    &.base-info{
			.product-banner{
				//padding: 10px 0;
				//background-color: #fff;
				.swiper-pagination{
					text-align: right;
					padding-right: 30px;
				}
		   	.swiper-pagination-fraction {
			    bottom: 10px;
			    width: 41px;
			    height: 41px;
			    border-radius: 50%;
			    background: #D8D8D8;
			    line-height: 41px;
			    color: #fff;
			    font-size: 13px;
			    right: 33px;
			    left: auto;
			    padding: 0;
			    text-align: center;
				}
			}
			.product-first{
				background-color: #fff;
				padding-top: 10px;
				border-bottom: 1px solid #E3E5E9;
				margin-bottom: 10px;
				.name{
					border-top: 1px solid #E3E5E9;
					font-size: 16px;
					color: #111111;
					padding: 12px 10px 10px;
				}
				.price-wrap{
					padding: 0 10px 8px;
					.price{
						font-size: 19px;
						color: #A92123;
					}
					.price-old{
						font-size: 11px;
						color: #AAAAAA;
						text-decoration: line-through;
					}
				}
				.coupon-wrap{
					padding: 15px 0 17px;
					border-top: 1px solid #E3E5E9;
					margin: 0 10px;
					.coupon-title{
						font-size: 14px;
						color: #848388;
					}
					.coupon-tips{
						display: inline-block;
						color: #fff;
						font-size: 11px;
						width: 90px;
						height: 13px;
						line-height: 13px;
						background-image: url("../images/coupon_bg.png");
						background-repeat: no-repeat;
						background-size: cover;
						text-align: center;
					}
				}
			}
			.product-second{
				padding: 15px 10px;
				background-color: #fff;
				border-top: 1px solid #CECECE;
				border-bottom: 1px solid #CECECE;
				margin-bottom: 10px;
				font-size: 14px;
				.left{
					float: left;
					color: #848388;
					font-size: 14px;
				}
				.right{
					float: left;
					margin-left: 10px;
					.tips{
						font-size: 12px;
						color: #fff;
						height: 17px;
						line-height: 17px;
						padding: 0 2px;
						display: inline-block;
						margin-top: 1px;
						vertical-align: top;
					}
					.first{
						margin-bottom: 10px;
						.tips{
							background-color: #FFB03F;
						}
					}
					.second{
						.tips{
							background-color: #F34D51;
						}
						strong{
							font-weight: normal;
							color: #F34D51;
						}
					}
				}
			}
			.product-third{
				padding: 0 10px;
				background-color: #fff;
				border-top: 1px solid #CECECE;
				border-bottom: 1px solid #CECECE;
				margin-bottom: 10px;
				.title{
					color: #848388;
					font-size: 14px;
					float: left;
				}
				.content{
					float: left;
					font-size: 14px;
					color: #242424;
					margin-left: 10px;
				}
				.text-red{
					color: #F34D51;
				}
				.first{
					display: block;
					padding: 15px 0 10px;
					border-bottom: 1px solid #CECECE;
				}
				.second{
					padding: 10px 0 15px;
					.content{
						font-size: 12px;
						color: #989898;
						margin-top: 1px;
					}

					.icon-location{
						display: inline-block;
						width: 12px;
						height: 16px;
						background-image: url("../images/location.png");
						background-repeat: no-repeat;
						background-size: cover;
						vertical-align: middle;
						margin-left: 8px;
					}
				}
			}
			.product-fourth{
				padding: 15px 10px;
				background-color: #fff;
				border-top: 1px solid #CECECE;
				border-bottom: 1px solid #CECECE;
				margin-bottom: 10px;
				.title{
					color: #848388;
					font-size: 14px;
					float: left;
				}
				.review-totals{
					float: left;
					font-size: 14px;
					color: #242424;
					margin-left: 10px;
				}
				.rating-wrap{
					float: right;
					vertical-align: top;
					margin-top: -3px;
					.score{
						font-size: 14px;
						color: #F6871E;
						display: inline-block;
						vertical-align: middle;
					}
					.icon{
						display: inline-block;
						vertical-align: middle;
						margin: 0 -2px;
						width: 16px;
						height: 16px;
						background-size: cover;
						background-repeat: no-repeat;
					}
					.icon-star-fill{
						background-image: url("../images/star-fill.png");
					}
					.icon-star{
						background-image: url("../images/star.png");
					}
				}
			}
			.product-fifth{
				background-color: #fff;
				border-top: 1px solid #CECECE;
				border-bottom: 1px solid #CECECE;
				margin-bottom: 10px;
				position: relative;
				.vendor-wrap{
					padding: 0 10px;
					line-height: 55px;
					height: 55px;
					display: block;
				}	
				.icon{
					display: inline-block;
					vertical-align: middle;
					background-repeat: no-repeat;
					background-size: cover;
				}
				.icon-category-star{
					background-image: url("../images/category_star.png");
					width: 17px;
					height: 28px;
					top: 0;
					left: 10px;
					position: absolute;
				}
				.icon-category{
					//background-image: url("../images/category.png");
					width: 90px;
					height: 45px;
					margin-left: 22px;
				}
				.category-name{
					font-size: 10px;
					color: #727272;
					margin-left: 2px;
					vertical-align: middle;
				}
			}
			.product-sixth{
				.related-title{
					font-size: 14px;
					color: #F34D51;
					padding-left: 16px;
					border-left: 4px solid #F34D51;
					height: 20px;
				}
				.related-products-list{
					padding: 6px 7px;
				}
				.product-item{
					.product-link{
						display: block;
					}
					float: left;
					width: 49%;
					margin-bottom: 7px;
					background-color: #fff;
					//padding: 7px;
					padding-bottom: 7px;
					&:nth-child(2n){
						float: right;
					}
					.product-image{
						width: 100%;
					}
					.name{
						font-size: 12px;
						color: #545454;
						padding: 0 10px;
						margin: 5px 0;
					}
					.price-wrap{
						padding: 0 10px;
					}
					.price{
						font-size: 16px;
						color: #A92123;
					}
					.price-old{
						font-size: 11px;
						color: #AAAAAA;
						text-decoration: line-through;
					}
				}
			}
    }
    &.description{
    	.desc-tab-header{
    		width: 100%;
    		height: 45px;
    		text-align: center;
    		line-height: 45px;
    		background-color: #fff;
    		border-bottom: 1px solid #E1E1E1;
    		.desc-tab-title{
    			display: inline-block;
    			font-size: 13px;
    			color: #9D9D9D;
    			height: 100%;
    			vertical-align: top;
    			text-align: center;
    			width: 30%;
    			&.selected{
    				color: #A92123;
    			}
    		}
    	}
    	.desc-tab-content{
    		background-color: #fff;
    		padding: 8px 10px;
    		.desc{
    			padding: 6px 14px;
    		}
    		.args{
    			padding: 9px 10px;
    			.recommon-price{
    				font-size: 16px;
    				color: #636363;
    				height: 29px;
    				line-height: 27px;
    				border:1px solid #464646;
    				.recommon-price-title{
    					display: inline-block;
    					border-right:1px solid #464646;
    					height: 100%;
    					width: 35%;
    					padding-left: 5px;
    				}
    				.recommon-price-content{
    					padding-left: 5px;
    					display: inline-block;
    				}
    			}
    			.args-table{
    				width: 100%;
    				text-align: left;
    				margin-top: 10px;
    				font-size: 15px;
    				td,th{
    					border:1px solid #AFADAD;
    					padding: 1px 5px;
    				}
    				.td-title{
    					width: 35%;
    				}
    			}
    		}
    		.after-sale{
    			padding: 8px 11px;
    			font-size: 13px;
    			color: #525252;
    		}
    	}
    }
    &.reviews{
    	.reviews-totals-list{
    		height: 47px;
    		padding-top: 8px;
    		padding-right: 10px;
    		text-align: center;
    		width: 100%;
    		background-color: #fff;
    		border-bottom: 1px solid #E1E1E1;
    		.reviews-totals-item{
    			display: inline-block;
    			height: 100%;
    			vertical-align: top;
    			text-align: center;
    			width: 20%;
    			font-size: 12px;
    			color: #9F9F9F;
    			&.totals{
    				color: #A92123;
    			}
    		}
    	}
    	.reviews-list{
    		margin-top: 10px;
    		.reviews-item{
    			margin-bottom: 10px;
    			padding-bottom: 8px;
    			border-top: 1px solid #E1E1E1;
    			border-bottom: 1px solid #E1E1E1;
    			background-color: #fff;
    			padding-left: 12px;
    			.review-header{
    				height: 47px;
    				line-height: 47px;
    				border-bottom: 1px solid #E6E6E6;
    				padding: 10px 10px 10px 0;
    				.author-wrap{
    					float: left;
    					height: 27px;
    					.author-img{
    						width: 27px;
    						height: 27px;
    						border-radius: 50%;
    						display: inline-block;
    						img{
    							width: 100%;
    							height: 100%;
    							vertical-align: top;
    							border-radius: 50%;
    						}
    						margin-right: 5px;
    					}
    					.author-name{
    						font-size: 13px;
    						color: #333333;
    						height: 27px;
    						line-height: 27px;
    						display: inline-block;
    						vertical-align: top;
    					}
    				}
    				.review-date{
    					float: right;
    					font-size: 12px;
    					color: #828284;
    					height: 27px;
    					line-height: 27px;
    				}
    			}
    		}
    	}
    	.review-rating{
    		margin-top: 9px;
    		.icon{
					display: inline-block;
					vertical-align: middle;
					margin: 0 -2px;
					width: 16px;
					height: 16px;
					background-size: cover;
					background-repeat: no-repeat;
				}
				.icon-star-fill{
					background-image: url("../images/star-fill.png");
				}
				.icon-star{
					background-image: url("../images/star.png");
				}
    	}
    	.review-content{
    		font-size: 13px;
    		color: #333333;
    		margin-top: 9px;
    	}
    }
	}

	.product-footer{
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 100;
		height: 50px;
		color: #fff;
		width: 100%;
		.wishlist-wrap{
			color: #fff;
			display: block;
			padding-top: 8px;
			float: left;
			width: 20%;
			height: 100%;
			vertical-align: top;
			background-color: rgba(51, 51, 51, 0.9);
			font-size: 10px;
			text-align: center;
			img{
				width: 23px;
				height: 17px;
				margin-bottom: 2px;
			}
		}
		.cart-wrap{
			color: #fff;
			padding-top: 7px;
			display: block;
			float: left;
			width: 20%;
			height: 100%;
			vertical-align: top;
			background-color: rgba(51, 51, 51, 0.9);
			font-size: 10px;
			text-align: center;
			img{
				width: 20px;
				height: 19px;
				margin-bottom: 2px;
			}
		}
		.add-cart{
			color: #fff;
			display: block;
			float: left;
			width: 30%;
			background-color: rgba(255, 172, 52, 0.9);
			font-size: 15px;
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
		.buy{
			color: #fff;
			display: block;
			float: left;
			width: 30%;
			background-color: rgba(169, 33, 35, 0.9);
			font-size: 15px;
			height: 50px;
			line-height: 50px;
			text-align: center;
		}
	}

	.select-product-section{
		position: fixed;
		z-index: 1000;
		background-color: #F8F8F8;
		bottom: -400px;
		width: 100%;
		text-align: center;
		transition:.5s bottom ease;
		&.show{
			bottom: 0;
		}
		.select-wrap{
			position: relative;
			.icon-close{
				position: absolute;
				top:10px;
				right: 10px;
				display: inline-block;
				background-image: url("../images/close.png");
				background-repeat: no-repeat;
				background-size: cover;
				width: 11px;
				height: 11px;
			}
			.product-info{
				height: 115px;
				padding-top: 5px;
				background-color: #fff;
				border-bottom: 1px solid #CECECE;
				img{
					width: 100px;
					height: 100px;
				}
				.product-base{
					text-align: left;
					padding-left: 10px;
				}
				.name{
					font-size: 14px;
					color: #111111;
					margin-bottom: 10px;
					padding-right: 30px;
				}
				.price{
					font-size: 19px;
					color: #A92123;
				}
			}
			.product-option{
				padding: 15px 10px 0;
				font-size: 15px;
				text-align: left;
				.option-title{
					color: #333333;
				}
				.option-list{
					width: 100%;
					margin-top: 13px;
					.option-item{
						display: block;
						float: left;
						height: 40px;
						line-height: 38px;
						padding: 0 5px;
						border:1px solid #CECECE;
						border-radius: 2px;
						background-color: #fff;
						color: #747474;
						margin-right: 5px;
						margin-bottom: 5px;
						&.selected{
							background-color: #B13638;
							border-color: #B13638;
							color: #fff;
						}
					}
				}
			}
			.quantity-wrap{
				text-align: left;
				font-size: 15px;
				padding: 15px 10px;
				.quantity-title{
					color: #333333;
					margin-bottom: 13px;
				}
				.quantity-input-wrap{
					height: 38px;
					.update-quantity{
						display: block;
						float: left;
						height: 38px;
						line-height: 36px;
						width: 38px;
						text-align: center;
						border:1px solid #CECECE;
						color: #747474;
					}
					.reduce{
						border-top-left-radius: 2px;
						border-bottom-left-radius: 2px;
					}
					.add{
						border-top-right-radius: 2px;
						border-bottom-right-radius: 2px;
					}
					input{
						width: 72px;
						height: 38px;
						background-color: #fff;
						color: #333333;
						float: left;
						border:none;
						border-top: 1px solid #CECECE;
						border-bottom: 1px solid #CECECE;
						text-align: center;
					}
				}
			}
			.select-footer{
				margin-top: 20px;
				.add-cart{
					color: #fff;
					display: block;
					float: left;
					width: 50%;
					background-color: rgba(255, 172, 52, 0.9);
					font-size: 15px;
					height: 50px;
					line-height: 50px;
					text-align: center;
				}
				.buy{
					color: #fff;
					display: block;
					float: left;
					width: 50%;
					background-color: rgba(169, 33, 35, 0.9);
					font-size: 15px;
					height: 50px;
					line-height: 50px;
					text-align: center;
				}
			}
		}
	}
	.cover{
		display: none;
	}

	img{
		width: 100%;
	}
}